<template>
    <div class="div">
      <img src="../../img/succed1.png" alt="" class="img" />
      <p class="p">Your payment is successful!</p>
      <button class="button">Back</button>
    </div>
</template>

<script>
export default {
  name: 'SuccedEasy',
  data () {
    return {

    }
  },
  methods: {

  }
}
</script>

<style scoped>
@media screen and (max-width: 600px) {
  /* 移动端 */
  .div {
    position: relative;
    width: 100%;
    height: 700px;
  }
  .img {
    position: absolute;
    top: 20%;
    left: 35%;
    width: 30%;
  }
  .p {
    position: absolute;
    font-size: 0.6rem;
    width: 80%;
    top: 35%;
    left: 15%;
  }
  .button {
    position: absolute;
    bottom: 5%;
    left: 5%;
    width: 90%;
    height: 50px;
    color: #215dd4;
    border: 1px solid #215dd4;
    border-radius: 20px;
    background-color: transparent;
  }
}
@media screen and (min-width: 600px) {
  /* PC端 */
  .box {
    position: relative;
    left: 20%;
    width: 100%;
    height: 400px;
  }
  .img {
    position: absolute;
    top: 15%;
    left: 45%;
    width: 10%;
  }
  .p {
    position: absolute;
    font-size: 8px;
    width: 27%;
    top: 35%;
    left: 36.5%;
  }
  .button {
    position: absolute;
    bottom: 9%;
    left: 35%;
    width: 30%;
    height: 20px;
    color: #215dd4;
    border: 0.3px solid #215dd4;
    border-radius: 20px;
    background-color: transparent;
  }
}
</style>
